$(document).ready(function() {
var canvas = null; // canvas DOM object
            var context = null; // canvas context
            var eventDisplay = "";
            
            var rectX = 0;
            var rectY = 0;
            
            var draggingRect = false;
            var draggingRectOffsetX = 0;
            var draggingRectOffsetY = 0;
            
            function drawEventDisplay(){
                context.font = "18pt Calibri";
                context.fillStyle = "black";
                context.fillText(eventDisplay, 10, 25);
				
					
				// draw the colummns					
				context.moveTo(0, 35);
				context.lineTo(canvas.width, 35);
				context.fillText("Not Started", 0+ 10, 60);
				
				context.moveTo(line1, 35);
				context.lineTo(line1, canvas.height );
				context.fillText("Coding", line1 + 10, 60);
				
				context.moveTo(line2, 35);
				context.lineTo(line2, canvas.height );
				context.fillText("Testing", line2+ 10, 60);
				
				context.moveTo(line3, 35);
				context.lineTo(line3, canvas.height );
				context.fillText("Completed", line3+ 10, 60);
				
				//Not Started, Coding, Testing, Completed

				
				context.stroke();
				
				// let's draw rows
				
				numUsers = 6;
				dist = 35;
				
				for (y = 0; y < numUsers; y++) {
					context.beginPath();
					dist = dist + canvas.height / numUsers;
					context.moveTo(0, dist);
					context.lineTo(canvas.width, dist);
					context.stroke();
				}
            }
			canvas = document.getElementById("myCanvas");
                context = canvas.getContext("2d");
				
				 rectX = canvas.width / 2 - 50;
                rectY = canvas.height / 2 - 25;
				
				var line1 = canvas.width * (1/4);
				var line2 = canvas.width * (2/4);
				var line3 = canvas.width * (3/4);
                
             myStage = new Kinetic.Stage(canvas);
			 
			 
		
		//$("#newCard").click(function() { // insert a new card
			

                myStage.setDrawStage(function(){
                    var mousePos = myStage.getMousePos();
                    
                    if (draggingRect) {
                        rectX = mousePos.x - draggingRectOffsetX;
                        rectY = mousePos.y - draggingRectOffsetY;
                    }
                    
                    drawEventDisplay();
                    
                    myStage.beginRegion();
                    
                    context.beginPath();
                    context.rect(rectX, rectY, 200, 100);  // the size of the note
                    context.lineWidth = 2;
                    context.strokeStyle = "black";  // border
                    context.fillStyle = "#F3EBE8";  // tan color for the note
					context.fill(); // lets fill it

                    context.closePath();
                    
                    myStage.addRegionEventListener("onmousedown", function(){
                        draggingRect = true;
                        var mousePos = myStage.getMousePos();
                        
                        draggingRectOffsetX = mousePos.x - rectX;
                        draggingRectOffsetY = mousePos.y - rectY;
                    });
                    myStage.addRegionEventListener("onmouseup", function(){
                        draggingRect = false;
                    });
                    myStage.addRegionEventListener("onmouseover", function(){
                        document.body.style.cursor = "pointer";
                    });
                    myStage.addRegionEventListener("onmouseout", function(){
                        document.body.style.cursor = "default";
                    });
                    
                    myStage.closeRegion();
                });
                
                eventDisplay = "Drag and drop the post it notes to the desired section";
                drawEventDisplay();
		//});
			
	});